body{
    margin: 0;
    background-color: #000000;
}
body{
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
}
html, body{
    height: 100%;
}
.all{
    flex: 1 1 25%;
}
/* 1 */
.rotating-plane{
    width: 64px;
    height: 64px;
    margin: auto;
    background-color: #6a69e2;
    animation: rotating-plane 1.2s infinite ease-in;
}
/*
添加动画
*/
@keyframes rotating-plane {
    0%{
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    }
    50%{
        transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
    }
    100%{
        transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
    }
}

/* 2 */
.double-bounce{
    width: 64px;
    height: 64px;
    margin: auto;
    position: relative;
}
.double-bounce .chidl{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    background-color: #6a69e2;
    opacity: .6;
    animation: double-bounce 2s infinite linear;
}
.double-bounce .double-bounce-2{
    animation-delay: -1s;
}
@keyframes double-bounce {
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0);
    }
}

/* 4 */
.wave{
    height: 64px;
    width: 64px;
    margin: auto;
}
.wave .rect{
    background-color: #6a69e2;
    height: 100%;
    width: 6px;
    display: inline-block;
    animation: wave-rect 1.2s infinite ease-in-out;
}
.wave .rect1{
    animation-delay: -1.1s;
}
.wave .rect2{
    animation-delay: -1s;
}
.wave .rect3{
    animation-delay: -.9s;
}
.wave .rect4{
    animation-delay: -.8s;
}
.wave .rect5{
    animation-delay: -.7s;
}
@keyframes wave-rect {
    0%{
        transform: scaleY(.4);
    }
    20%{
        transform: scaleY(1);
    }
    40%{
        transform: scaleY(.4);
    }
    100%{
        transform: scaleY(.4);
    }
}

/* 4 */
.cubes{
    width: 64px;
    height: 64px;
    margin: auto;
    position: relative;
}
.cubes .cube{
    width: 16px;
    height: 16px;
    background-color: #6a69e2;
    position: absolute;
    left: 0;
    top: 0;
    animation: cubes 1.8s infinite ease-in-out;
}
.cubes .cube-2{
    animation-delay: -.9s;
}
@keyframes cubes {
    0%{
         transform: rotate(0deg);
     }
    25%{
        transform: rotate(-90deg) translateY(32px) scale(.5);
    }
    50%{
        transform: translateX(32px) translateY(32px) rotate(-179deg);
    }
    50.1%{
        transform: translateX(32px) translateY(32px) rotate(-180deg);
    }
    75%{
        transform: translateX(0) translateY(32px) rotate(-270deg) scale(.5);
    }
    100%{
        transform: rotate(-360deg);
    }
}

/* 5 */
.spinner{
    width: 64px;
    height: 64px;
    background-color: #6a69e2;
    margin: auto;
    border-radius: 50%;
    animation: spinner 1s infinite ease-in-out;
}
@keyframes spinner {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}
.dots{
    width: 64px;
    height: 64px;
    margin: auto;
    animation: dots 2s infinite linear;
}
@keyframes dots {
    100%{
        transform: rotate(360deg);
    }
}
.dots .chidl{
    width: 32px;
    height: 32px;
    display: inline-block;
    background-color: #6a69e2;
    border-radius: 50%;
    animation: dots-child 2s infinite linear;
}
.dots .dot-2{
    animation-delay: -1s;
}
@keyframes dots-child {
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(1);
    }
    100%{
        transform: scale(0);
    }
}

/* 7 */
.three-bounce{
    width: 128px;
    margin: auto;
}
.three-bounce .child{
    width: 32px;
    height: 32px;
    background-color: #6a69e2;
    border-radius: 50%;
    display: inline-block;
    animation: three-bounce 1.4s infinite ease-in-out;
}
.three-bounce .bounce-1{
    animation-delay: -.32s;
}
.three-bounce .bounce-2{
    animation-delay: -.16s;
}
@keyframes three-bounce {
    0%{
        transform: scale(0);
    }
    40%{
        transform: scale(1);
    }
    80%{
        transform: scale(0);
    }
    100%{
        transform: scale(0);
    }
}

/* 8 */
.circle-bounce{
    width: 64px;
    height: 64px;
    margin: auto;
    position: relative;
}
.circle-bounce .child{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.circle-bounce .child::before{
    content: "";
    display: block;
    margin:  0 auto;
    width: 15%;
    height: 15%;
    background-color: #6a69e2;
    border-radius: 100%;
    animation: circle-bounce 1.2s infinite ease-in-out;
}
.circle-bounce .circle2{
     transform: rotate(30deg);
}
.circle-bounce .circle2::before{
    animation-delay: -1.1s;
}
.circle-bounce .circle3{
    transform: rotate(60deg);
}
.circle-bounce .circle3::before{
    animation-delay: -1s;
}
.circle-bounce .circle4{
    transform: rotate(90deg);
}
.circle-bounce .circle4::before{
    animation-delay: -.9s;
}
.circle-bounce .circle5{
    transform: rotate(120deg);
}
.circle-bounce .circle5::before{
    animation-delay: -.8s;
}
.circle-bounce .circle6{
    transform: rotate(150deg);
}
.circle-bounce .circle6::before{
    animation-delay: -.7s;
}
.circle-bounce .circle7{
    transform: rotate(180deg);
}
.circle-bounce .circle7::before{
    animation-delay: -.6s;
}
.circle-bounce .circle8{
    transform: rotate(210deg);
}
.circle-bounce .circle8::before{
    animation-delay: -.5s;
}
.circle-bounce .circle9{
    transform: rotate(240deg);
}
.circle-bounce .circle9::before{
    animation-delay: -.4s;
}
.circle-bounce .circle10{
    transform: rotate(270deg);
}
.circle-bounce .circle10::before{
    animation-delay: -.3s;
}
.circle-bounce .circle11{
    transform: rotate(300deg);
}
.circle-bounce .circle11::before{
    animation-delay: -.2s;
}
.circle-bounce .circle12{
    transform: rotate(330deg);
}
.circle-bounce .circle12::before{
    animation-delay: -.1s;
}
@keyframes circle-bounce {
    0%{
        transform: scale(0);
    }
    40%{
        transform: scale(1);
    }
    80%{
        transform: scale(0);
    }
    100%{
        transform: scale(0);
    }
}
/* 9 */
.cube-grid{
    width: 64px;
    height: 64px;
    margin: auto;
}
.cube-grid .cube{
    width: 33%;
    height: 33%;
    background-color: #6a69e2;
    float: left;
    animation: cube-grid infinite 1.3s ease-in-out;
}
.cube-grid .cube-1{
    animation-delay: .2s;
}
.cube-grid .cube-2{
    animation-delay: .3s;
}
.cube-grid .cube-3{
    animation-delay: .4s;
}
.cube-grid .cube-4{
    animation-delay: .1s;
}
.cube-grid .cube-5{
    animation-delay: .2s;
}
.cube-grid .cube-6{
    animation-delay: .3s;
}
.cube-grid .cube-7{
    animation-delay: 0s;
}
.cube-grid .cube-8{
    animation-delay: .1s;
}
.cube-grid .cube-9{
    animation-delay: .2s;
}
@keyframes cube-grid {
    0%{
        transform: scale3d(1,1,1);
    }
    35%{
        transform: scale3d(0,0,1);
    }
    70%{
        transform: scale3d(1,1,1);
    }
    100%{
        transform: scale3d(1,1,1);
    }
}

/* 10 */
.circle-opactiy{
    width: 64px;
    height: 64px;
    margin: auto;
    position: relative;
}
.circle-opactiy .child{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.circle-opactiy .child::before{
    content: "";
    display: block;
    margin:  0 auto;
    width: 15%;
    height: 15%;
    background-color: #6a69e2;
    border-radius: 100%;
    animation: circle-opacity 1.2s infinite ease-in-out;
}
.circle-opactiy .circle2{
    transform: rotate(30deg);
}
.circle-opactiy .circle2::before{
    animation-delay: -1.1s;
}
.circle-opactiy .circle3{
    transform: rotate(60deg);
}
.circle-opactiy .circle3::before{
    animation-delay: -1s;
}
.circle-opactiy .circle4{
    transform: rotate(90deg);
}
.circle-opactiy .circle4::before{
    animation-delay: -.9s;
}
.circle-opactiy .circle5{
    transform: rotate(120deg);
}
.circle-opactiy .circle5::before{
    animation-delay: -.8s;
}
.circle-opactiy .circle6{
    transform: rotate(150deg);
}
.circle-opactiy .circle6::before{
    animation-delay: -.7s;
}
.circle-opactiy .circle7{
    transform: rotate(180deg);
}
.circle-opactiy .circle7::before{
    animation-delay: -.6s;
}
.circle-opactiy .circle8{
    transform: rotate(210deg);
}
.circle-opactiy .circle8::before{
    animation-delay: -.5s;
}
.circle-opactiy .circle9{
    transform: rotate(240deg);
}
.circle-opactiy .circle9::before{
    animation-delay: -.4s;
}
.circle-opactiy .circle10{
    transform: rotate(270deg);
}
.circle-opactiy .circle10::before{
    animation-delay: -.3s;
}
.circle-opactiy .circle11{
    transform: rotate(300deg);
}
.circle-opactiy .circle11::before{
    animation-delay: -.2s;
}
.circle-opactiy .circle12{
    transform: rotate(330deg);
}
.circle-opactiy .circle12::before{
    animation-delay: -.1s;
}
@keyframes circle-opacity {
    0%{
        opacity: 0;
    }
    40%{
        opacity: 1;
    }
    80%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}

/* 11 */
.folding-cube{
    width: 64px;
    height: 64px;
    margin: auto;
    transform: rotateZ(45deg);
}
.folding-cube .cube{
    width: 50%;
    height: 50%;
    float: left;
    position: relative;
}
.folding-cube .cube::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #6a69e2;
    animation:folding-cube 2.6s infinite linear both;
    transform-origin: 100% 100% ;
}
.folding-cube .cube-2{
    transform: rotateZ(90deg);
}
.folding-cube .cube-3{
    transform: rotateZ(180deg);
}
.folding-cube .cube-4{
    transform: rotateZ(270deg);
}
.folding-cube .cube-2::before{
    animation-delay: .3s;
}
.folding-cube .cube-3::before{
    animation-delay: .6s;
}
.folding-cube .cube-4::before{
    animation-delay: 1.2s;
}
@keyframes folding-cube {
    0%{
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    10%{
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }
    25%{
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    75%{
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }
    90%{
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
    100%{
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}